<!--评论模块-->
<template>
    <div class="container infinite-list-wrapper">
        <ul
            class="list"
            v-infinite-scroll="load"
            infinite-scroll-disabled="disabled"
            style="width: 100%"
        >
            <li
                class="comment list-item"
                v-for="(item, index) in localComments"
                :key="index"
            >
                <div class="info">
                    <img
                        class="avatar"
                        :src="item.userAvatar"
                        width="36"
                        height="36"
                    />
                    <div class="right">
                        <div class="name">{{ item.userName }}</div>
                        <div class="createTime">
                            {{ timestampToTime(item.createTime) }}
                        </div>
                    </div>
                </div>
                <div class="content">{{ item.content }}</div>
                <div class="control">
                    <span
                        class="like"
                        :class="{ active: item.like }"
                        @click="likeClick(item, index)"
                    >
                        <i class="iconfont icon-like"></i>
                        <span class="like-num">
                            {{
                                item.likeNum > 0 ? item.likeNum + "人赞" : "赞"
                            }}
                        </span>
                    </span>
                    <span class="comment-reply" @click="showCommentInput(item)">
                        <i class="iconfont icon-comment"></i>
                        <span>回复</span>
                    </span>
                </div>
                <div class="reply">
                    <template v-if="item.isExpand">
                        <div
                            class="item"
                            v-for="(reply, replyIndex) in item.reply"
                            :key="replyIndex"
                        >
                            <div class="reply-content">
                                <span class="from-name">
                                    {{ reply.userName }}
                                </span>
                                <span>:</span>
                                <span class="to-name">@{{ reply.toName }}</span>
                                <span>{{ reply.content }}</span>
                            </div>
                            <div class="reply-bottom">
                                <span>
                                    {{ timestampToTime(reply.createTime) }}
                                </span>
                                <span
                                    class="reply-text"
                                    @click="showCommentInput(item, reply)"
                                >
                                    <i class="iconfont icon-comment"></i>
                                    <span>回复</span>
                                </span>
                            </div>
                        </div>
                    </template>

                    <div v-if="!item.isExpand">
                        <span
                            class="expand-button"
                            @click="expandReplies(index)"
                        >
                            查看全部{{ item.reply.length }}条回复
                        </span>
                    </div>

                    <!-- <div
          class="write-reply"
          v-if="item.reply.length > 0"
          @click="showCommentInput(item)"
        >
          <i class="el-icon-edit"></i>
          <span class="add-comment">添加新评论</span>
        </div> -->
                    <transition name="fade">
                        <div
                            class="input-wrapper"
                            v-if="showItemId === item.id"
                        >
                            <el-input
                                class="gray-bg-input"
                                v-model="inputComment"
                                type="textarea"
                                :rows="3"
                                autofocus
                                placeholder="写下你的评论"
                            ></el-input>
                            <div class="btn-control">
                                <span class="cancel" @click="cancel">取消</span>
                                <el-button
                                    class="btn"
                                    type="success"
                                    size="small"
                                    round
                                    @click="commitComment(item, index)"
                                >
                                    确定
                                </el-button>
                            </div>
                        </div>
                    </transition>
                </div>
            </li>
        </ul>
        <p v-if="loading" @click="load">加载中...</p>
        <p v-if="noMore">我也是有底线的~</p>
    </div>
</template>

<script>
import {mixin} from "@/mixins";
import {timestampToTime} from "@/utils/utils";
import {mapGetters} from "vuex";
import {getListByArticleId, noLike, setComment, setLike,} from "../api/index";

export default {
    props: {
        /**
         * 文章id
         */
        articleId: {
            type: String,
            required: true,
        },
        /**
         * 评论总数
         */
        total: {
            type: Number,
            required: true,
        },
    },
    mixins: [mixin],
    components: {},
    data() {
        return {
            inputComment: "",
            showItemId: "",
            showToId: "",
            loading: false,
            localComments: [],
            pageSize: 10,
            current: 0,
            localTotal: 0,
        };
    },
    computed: {
        noMore() {
            return this.localComments.length >= this.localTotal;
        },
        disabled() {
            return this.loading || this.noMore;
        },
        ...mapGetters([
            "id", // 文章或文章id
            "loginIn", // 用户是否已登录
            "userId", // 当前登录用户id
            "avator", // 当前登录用户头像
        ]),
    },
    mounted() {
        console.log("local");
        console.log(this.localComments);
    },
    methods: {
        timestampToTime(date) {
            return timestampToTime(date, true);
        },
        show(data) {
            this.localComments = data.concat(this.localComments);
        },
        load() {
            console.log("loading........");
            this.loading = true;
            setTimeout(() => {
                this.getComment();
            }, 2000);
        },
        /**
         *  评论列表
         */
        getComment() {
            this.current = this.current + 1;
            getListByArticleId({
                articleId: this.articleId,
                pageSize: this.pageSize,
                current: this.current,
            })
                .then((res) => {
                    this.localComments.push(...res.data.records);
                    this.localTotal = res.data.total;
                })
                .catch((err) => {
                    this.current = this.current - 1;
                    this.notify("评论加载失败", "error");
                });
        },
        /**
         * 展开
         */
        expandReplies(index) {
            this.localComments[index].isExpand = true; // 设置为已经展开
        },
        /**
         * 点赞
         */
        likeClick(item, index) {
            console.log(item);
            // 取消点赞
            if (this.loginIn) {
                if (item.like) {
                    this.$set(item, "like", false);
                    item.likeNum--;
                    noLike({
                        id: item.id,
                        type: "comment",
                    })
                        .then((res) => {
                            item.like = !item.like;
                            console.log("取消成功");
                            let _data = this.localComments[index];
                            _data.like = false;
                            if (_data.likeNum > 0) {
                                _data.likeNum = _data.likeNum - 1;
                            }
                            this.$set(this.localComments, index, _data); // 这样设置页面就刷新了
                            console.log(this.localComments);
                        })
                        .catch((err) => {
                            this.notify("取消点赞失败", "error");
                        });
                } else {
                    setLike({
                        targetId: item.id,
                        likeType: 0,
                        targetType: "comment",
                    })
                        .then((res) => {
                            item.like = !item.like;
                            console.log("点赞成功");
                            let _data = this.localComments[index];
                            _data.like = true;
                            _data.likeNum = _data.likeNum + 1;
                            this.$set(this.localComments, index, _data); // 这样设置页面就刷新了
                            console.log(this.localComments);
                        })
                        .catch((err) => {
                            this.notify("点赞失败", "error");
                        });
                }
            } else {
                this.notify("请先登录~", "error");
            }
        },

        /**
         * 点击取消按钮
         */
        cancel() {
            this.showItemId = "";
            this.showToId = "";
        },

        /**
         * 提交评论
         */
        commitComment(item, index) {
            console.log(item);
            console.log(index);
            if (this.loginIn) {
                if (this.inputComment) {
                    setComment({
                        articleId: this.articleId,
                        userId: this.userId,
                        content: this.inputComment,
                        parentCommentId: this.showItemId,
                        toId: this.showToId,
                    })
                        .then((res) => {
                            if (res.code === 1) {
                                this.notify("评论成功", "success");
                                this.inputComment = "";
                                let _data = this.localComments[index];
                                _data.reply.push(res.data);
                                this.$set(this.localComments, index, _data); // 这样设置页面就刷新了
                                console.log(this.localComments);
                            } else {
                                this.notify("评论失败", "error");
                            }
                        })
                        .catch((err) => {
                            this.notify("评论失败", "error");
                        });
                } else {
                    this.notify("你还没填写评论提交空气？", "error");
                }
            } else {
                this.rank = null;
                this.notify("请先登录", "warning");
            }
        },
        /**
         * 点击评论按钮显示输入框
         * item: 当前大评论
         * reply: 当前回复的评论
         */
        showCommentInput(item, reply) {
            // if (reply) {
            //   this.inputComment = '@' + reply.userName + ' '
            // } else {
            //   this.inputComment = ''
            // }
            this.inputComment = "";
            this.showItemId = item.id;
            this.showToId = item.userId;
        },
    },
    created() {},
};
</script>

<style scoped lang="scss">
@use "../assets/css/comment-list.scss";
</style>
